---
category: DOM
created: '2023-08-25'
description: The differences between append and appendChild functions
openGraphCover: /og/this-vs-that/append.png
title: append vs appendChild
---

When it comes to [adding new elements](https://phuoc.ng/collection/html-dom/append-to-an-element/) to the Document Object Model (DOM) in JavaScript, there are two methods that may seem similar at first glance: `append` and `appendChild`.

However, in the next section, we'll explore the key difference between the two.

## The `appendChild` method

To add a new child node to an existing parent node, use the `appendChild` method. Simply pass the node you want to add as a child as the method's argument.

For instance, let's say you have a `div` element with an `id` of `parent`. To add a new `p` element as a child, you can use the `appendChild` method.

```js
const parent = document.getElementById('parent');
const child = document.createElement('div');
parent.appendChild(child);
```

In this example, we start by finding the existing `div` element with an `id` of `parent`. Next, we create a new `div` element using the `createElement` method. Finally, we add the new `p` element to the `div` element as a child using the `appendChild` method.

## The `append` method

The `append` method is like `appendChild`, but better. With `append`, you can add multiple nodes all at once.

For example, let's say you want to add a new paragraph `p` element with some text to an existing `div` element. You can do this easily using the `append` method like so:

```js
const parent = document.getElementById('parent');
const child = document.createElement('div');
const otherChild = document.createTextNode('Some text');

parent.append(child, otherChild);
```

In this example, we start by getting a reference to an existing `div` element that has an `id` of `parent`. Then, we create a new `div` element and a text node using the `createElement` and `createTextNode` methods, respectively. Finally, we add both the new `div` element and the text node as children of the `div` element using the `append` method.

## In Conclusion

In summary, if you want to add a single child node to an existing parent node, you can use the `appendChild` method. But if you want to add multiple nodes at once, the `append` method is your go-to.
